<template>
  <view class="container">
    <!-- 用户信息 -->
    <view class="user-info">
      <!-- 用户基本信息 -->
      <view class="user-basic-info">
        <view class="user-avatar">
          <image :src="userInfo.avatar || 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=120&h=120&fit=crop&crop=center'" mode="aspectFill"></image>
        </view>
        <view class="user-detail">
          <view class="name-level">
            <text class="user-name">{{ userInfo.username || '未登录' }}</text>
            <view class="level-tag">L3</view>
          </view>
          <text class="user-id">ID: {{ userInfo.userId || '10086735' }}</text>
        </view>
        <view class="setting-icon">
          <text class="iconfont icon-shezhi"></text>
        </view>
      </view>
      <!-- 用户统计数据 -->
      <view class="user-data">
        <view class="data-item">
          <text class="data-num">1280</text>
          <text class="data-label">积分</text>
        </view>
        <view class="data-item">
          <text class="data-num">24</text>
          <text class="data-label">学习时长(h)</text>
        </view>
        <view class="data-item">
          <text class="data-num">8</text>
          <text class="data-label">已完成任务</text>
        </view>
      </view>
    </view>

    <!-- 常用功能 -->
    <view class="section-card">
      <view class="section-header">
        <text class="section-title">常用功能</text>
      </view>
      <view class="feature-items">
        <view
          class="feature-item"
          v-for="(item, index) in featureList"
          :key="index"
          @touchstart="onFeatureTouchStart(index)"
          @touchend="onFeatureTouchEnd(index)"
          @touchcancel="onFeatureTouchEnd(index)"
          :class="{ 'feature-item-active': activeFeatureIndex === index }"
        >
          <view class="feature-icon" :class="item.bgClass">
            <text class="iconfont" :class="item.icon"></text>
          </view>
          <text class="feature-text">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 系统设置 -->
    <view class="section-card">
      <view class="section-header">
        <text class="section-title">系统设置</text>
      </view>
      <view class="setting-items">
        <view 
          class="setting-item" 
          @touchstart="onSettingTouchStart(0)"
          @touchend="onSettingTouchEnd(0)"
          @touchcancel="onSettingTouchEnd(0)"
          :class="{ 'setting-item-active': activeSettingIndex === 0 }"
        >
          <view class="setting-left">
            <view class="setting-icon blue-bg">
              <text class="iconfont icon-anquan"></text>
            </view>
            <text class="setting-text">账号安全</text>
          </view>
          <text class="setting-arrow">›</text>
        </view>
        <view 
          class="setting-item"
          @touchstart="onSettingTouchStart(1)"
          @touchend="onSettingTouchEnd(1)"
          @touchcancel="onSettingTouchEnd(1)"
          :class="{ 'setting-item-active': activeSettingIndex === 1 }"
        >
          <view class="setting-left">
            <view class="setting-icon purple-bg">
              <text class="iconfont icon-tongzhizhongxin"></text>
            </view>
            <text class="setting-text">通知设置</text>
          </view>
          <text class="setting-arrow">›</text>
        </view>
        <view 
          class="setting-item"
          @touchstart="onSettingTouchStart(2)"
          @touchend="onSettingTouchEnd(2)"
          @touchcancel="onSettingTouchEnd(2)"
          :class="{ 'setting-item-active': activeSettingIndex === 2 }"
        >
          <view class="setting-left">
            <view class="setting-icon green-bg">
              <text class="iconfont icon-yinsi"></text>
            </view>
            <text class="setting-text">隐私设置</text>
          </view>
          <text class="setting-arrow">›</text>
        </view>
        <view 
          class="setting-item"
          @touchstart="onSettingTouchStart(3)"
          @touchend="onSettingTouchEnd(3)"
          @touchcancel="onSettingTouchEnd(3)"
          :class="{ 'setting-item-active': activeSettingIndex === 3 }"
        >
          <view class="setting-left">
            <view class="setting-icon gray-bg">
              <text class="iconfont icon-guanyu"></text>
            </view>
            <text class="setting-text">关于我们</text>
          </view>
          <text class="setting-arrow">›</text>
        </view>
        <view 
          class="setting-item"
          @touchstart="onSettingTouchStart(4)"
          @touchend="onSettingTouchEnd(4, true)"
          @touchcancel="onSettingTouchEnd(4)"
          :class="{ 'setting-item-active': activeSettingIndex === 4 }"
        >
          <view class="setting-left">
            <view class="setting-icon red-bg">
              <text class="iconfont icon-tuichu"></text>
            </view>
            <text class="setting-text">退出登录</text>
          </view>
          <text class="setting-arrow">›</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/api';

export default {
  data() {
    return {
      isLogin: true,
      userInfo: {
        avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=120&h=120&fit=crop&crop=center',
        username: '张航宇',
        userId: '10086735',
        favorites: 12,
        follows: 25,
        footprints: 38,
        fans: 10
      },
      featureList: [
        { name: '我的积分', icon: 'icon-jifen', bgClass: 'blue-bg' },
        { name: '我的团队', icon: 'icon-tuandui', bgClass: 'orange-bg' },
        { name: '我的成就', icon: 'icon-jiangpai03-F', bgClass: 'green-bg' },
        { name: '我的服务', icon: 'icon-fuwu', bgClass: 'purple-bg' }
      ],
      activeFeatureIndex: null,
      activeSettingIndex: -1, // 新增：用于控制设置项的点击特效
    };
  },
  onShow() {
    // 获取用户信息（假设此时用户已登录，因为路由拦截器已经处理了未登录情况）
    this.getUserInfo();
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      // 这里应该是从服务器获取用户信息的逻辑
      const token = uni.getStorageSync('token');
      if (!token) return;

      // 使用封装的API获取用户信息
      api.user.getUserInfo()
        .then(res => {
          this.userInfo = res.data;
        })
        .catch(err => {
          console.error('获取用户信息失败', err);
      });
    },

    onFeatureTouchStart(index) {
      this.activeFeatureIndex = index;
    },

    onFeatureTouchEnd(index) {
      setTimeout(() => {
        this.activeFeatureIndex = -1;
      }, 100);
    },

    onSettingTouchStart(index) {
      this.activeSettingIndex = index;
    },

    onSettingTouchEnd(index, isLogout = false) {
      setTimeout(() => {
        this.activeSettingIndex = -1;
        if (isLogout) {
          // 弹出确认对话框
          uni.showModal({
            title: '退出登录',
            content: '确定要退出登录吗？',
            confirmColor: '#1455ff',
            success: (res) => {
              if (res.confirm) {
                // 用户点击确认，清理token
                uni.removeStorageSync('token');
                // 设置标记，表示是从退出登录操作跳转到登录页
                uni.setStorageSync('logoutRedirect', 'true');
                
                uni.showToast({
                  title: '已退出登录',
                  icon: 'success',
                  duration: 1500
                });
                
                // 延迟后跳转到登录页
                setTimeout(() => {
                  uni.reLaunch({
                    url: '/subPackages/login/index'
                  });
                }, 1500);
              }
            }
          });
        } else {
          // 处理其他设置项的点击
          this.handleSettingClick(index);
        }
      }, 100);
    },
    
    // 处理设置项点击
    handleSettingClick(index) {
      const settingActions = [
        () => {
          uni.showToast({ title: '账号安全', icon: 'none' });
        },
        () => {
          uni.showToast({ title: '通知设置', icon: 'none' });
        },
        () => {
          uni.showToast({ title: '隐私设置', icon: 'none' });
        },
        () => {
          uni.showToast({ title: '关于我们', icon: 'none' });
        }
      ];
      
      if (settingActions[index]) {
        settingActions[index]();
      }
    }
  }
};
</script>

<style lang="scss">
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 30rpx;
}

/* 用户信息区域 */
.user-info {
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #1455ff, #50a8eb);
  position: relative;
  height: 420rpx;
  justify-content: flex-end;
  box-sizing: border-box;
}

.user-info .user-basic-info {
  width: 100%;
  height: 120rpx;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 20rpx;
  padding: 60rpx;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 4rpx solid rgba(255, 255, 255, 0.5);
  position: static;
}

.user-avatar image {
  width: 100%;
  height: 100%;
}

.user-detail {
  margin-left: 30rpx;
  flex: 1;
  position: static;
}

.name-level {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.user-name {
  font-size: 36rpx;
  color: #fff;
  font-weight: bold;
  margin-right: 15rpx;
}

.level-tag {
  background-color: #e6c457;
  color: white;
  font-size: 24rpx;
  padding: 2rpx 15rpx;
  border-radius: 20rpx;
  font-weight: bold;
}

.user-id {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.setting-icon {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: static;
}

.iconfont {
  font-size: 32rpx;
  color: inherit;
}

/* 用户统计数据 */
.user-data {
  display: flex;
  color: white;
  margin-bottom: 20rpx;
}

.data-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.data-num {
  font-size: 42rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.data-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

/* 通用卡片样式 */
.section-card {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;
}

.section-header {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

/* 常用功能 */
.feature-items {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
  transition: transform 0.15s ease;
  z-index: 1;
}

.feature-item-active {
  transform: scale(0.92);
}

.feature-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
  position: relative;
  overflow: hidden;
}

.feature-icon:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

.feature-item-active .feature-icon:after {
  animation: ripple 0.4s ease-out;
}

@keyframes ripple {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }
  to {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.feature-text {
  font-size: 26rpx;
  color: #333;
  transition: color 0.2s ease;
}

.feature-item-active .feature-text {
  color: #1989fa;
}

.feature-icon .iconfont {
  font-size: 50rpx;
  color: #333;
}

/* 系统设置 */
.setting-items {
  display: flex;
  flex-direction: column;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  transition: all 0.15s ease;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item-active {
  transform: scale(0.98);
  background-color: #f5f5f5;
  border-radius: 8rpx;
}

.setting-item-active .setting-text {
  color: #1455ff;
}

.setting-left {
  display: flex;
  align-items: center;
}

.setting-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.setting-text {
  font-size: 28rpx;
  color: #333;
}

.setting-arrow {
  color: #ccc;
  font-size: 36rpx;
  font-weight: bold;
}

/* 背景颜色 */
.blue-bg {
  background-color: #e6f0ff;
}

.orange-bg {
  background-color: #fff0e6;
}

.green-bg {
  background-color: #e6fff0;
}

.purple-bg {
  background-color: #f0e6ff;
}

.gray-bg {
  background-color: #f0f0f0;
}

.red-bg {
  background-color: #ffe6e6;
}
</style>
